<template>
  <view class="video-player-page">
    <view class="backdrop-container">
      <image class="backdrop" :src="currentVideo.cover" mode="aspectFill" />
      <view class="backdrop-overlay" />
    </view>
    
    <view class="content-container">
      <view class="header">
        <view class="back-btn" @click="navigateBack">←</view>
        <text class="title">{{ currentVideo.title }}</text>
      </view>
      
      <view class="player-container">
        <video-player
          :src="currentVideo.url"
          :poster="currentVideo.cover"
          :autoplay="true"
        />
      </view>
      
      <view class="info-section">
        <view class="meta-info">
          <text class="play-count">播放量：{{ currentVideo.playCount }}次</text>
          <text class="duration">时长：{{ currentVideo.duration }}</text>
        </view>
        
        <view v-if="currentVideo.type === 'series'" class="episodes-section">
          <text class="section-title">选集</text>
          <scroll-view class="episodes-scroll" scroll-x>
            <view 
              v-for="episode in episodes" 
              :key="episode.id"
              class="episode-item"
              :class="{ active: episode.id === currentEpisodeId }"
              @click="switchEpisode(episode)"
            >
              <text class="episode-number">第{{ episode.number }}集</text>
              <text class="episode-title">{{ episode.title }}</text>
            </view>
          </scroll-view>
        </view>
        
        <view class="description">
          <view class="section-title">剧情简介</view>
          <text class="description-text">{{ currentVideo.description }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import VideoPlayer from '../../components/VideoPlayer.vue';

// 模拟数据
const currentVideo = ref({
  title: '示例视频标题',
  url: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  cover: '/static/logo.png',
  playCount: '1.2万',
  duration: '00:52',
  type: 'series',
  description: '这是一段视频描述文本，介绍视频的内容概要和看点。'
});

const episodes = ref([
  { id: 1, number: 1, title: '第一集标题' },
  { id: 2, number: 2, title: '第二集标题' },
  { id: 3, number: 3, title: '第三集标题' },
  { id: 4, number: 4, title: '第四集标题' },
  { id: 5, number: 5, title: '第五集标题' },
]);

const currentEpisodeId = ref(1);

const navigateBack = () => {
  uni.navigateBack();
};

const switchEpisode = (episode: any) => {
  currentEpisodeId.value = episode.id;
  // TODO: 切换视频源
};
</script>

<style lang="scss">
.video-player-page {
  position: relative;
  min-height: 100vh;
  background-color: #000;
}

.backdrop-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 1;
  
  .backdrop {
    width: 100%;
    height: 100%;
    filter: blur(20px);
    transform: scale(1.1);
    opacity: 0.3;
  }
  
  .backdrop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8));
  }
}

.content-container {
  position: relative;
  z-index: 2;
  padding-bottom: 40rpx;
}

.header {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 40rpx;
    color: #fff;
    background: rgba(255,255,255,0.1);
    border-radius: 30rpx;
    margin-right: 20rpx;
  }
  
  .title {
    flex: 1;
    font-size: 32rpx;
    color: #fff;
    font-weight: bold;
  }
}

.player-container {
  width: 100%;
  height: 420rpx;
  background: #000;
  margin-bottom: 30rpx;
}

.info-section {
  padding: 0 30rpx;
  
  .meta-info {
    display: flex;
    margin-bottom: 30rpx;
    
    .play-count, .duration {
      font-size: 24rpx;
      color: rgba(255,255,255,0.6);
      margin-right: 30rpx;
    }
  }
}

.episodes-section {
  margin-bottom: 30rpx;
  
  .section-title {
    font-size: 28rpx;
    color: #fff;
    margin: 20rpx 0;
    padding-right: 20rpx;
    display: block;
  }
  
  .episodes-scroll {
    white-space: nowrap;
    .episode-item {
      display: inline-block;
      padding: 20rpx 30rpx;
      background: rgba(255,255,255,0.1);
      border-radius: 12rpx;
      margin: 0 10rpx;
      transition: all 0.3s ease;
      
      &.active {
        background: #ff6b6b;
        transform: scale(1.05);
      }
      
      .episode-number {
        font-size: 24rpx;
        color: #fff;
        display: block;
        margin-bottom: 8rpx;
      }
      
      .episode-title {
        font-size: 22rpx;
        color: rgba(255,255,255,0.8);
        display: block;
      }
    }
  }
}

.description {
  .section-title {
    font-size: 28rpx;
    color: #fff;
    margin-bottom: 20rpx;
  }
  
  .description-text {
    font-size: 26rpx;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
  }
}
</style>